<template>
  <div class="topTable">
    <div class="top_class">
      <img :src="entrance" width="63" height="52" alt="" />
      <p>待出场</p>
      <span class="english_label">Waiting to appear</span>
    </div>
    <el-table
      ref="tableRef"
      :data="tableData"
      :border="false"
      style="width: 100%; height: 100%"
    >
      <el-table-column align="center" header-cell-class-name="top_two_class">
        <el-table-column align="center" prop="plateNo">
          <template #header>
            <img :src="licenseplate" width="36" height="36" alt="" />
            <p>车牌号</p>
          </template>
          <!-- <template #default="scoped">
              <span>{{ scoped.row.k1.plateNo }}</span>
            </template> -->
        </el-table-column>
        <el-table-column align="center" prop="name">
          <template #header>
            <img :src="name" width="36" height="36" alt="" />
            <p>姓名</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="phone">
          <template #header>
            <img :src="phone" width="36" height="36" alt="" />
            <p>电话</p>
          </template>
        </el-table-column>
      </el-table-column>
      <!-- <el-table-column prop="name" label="名字" width="120" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="No" label="编号" /> -->
    </el-table>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import entrance from "@/assets/img/entrance.png";
import licenseplate from "@/assets/img/licenseplate.png";
import name from "@/assets/img/name.png";
import parkinglot from "@/assets/img/parkinglot.png";
import phone from "@/assets/img/phone.png";
import { waitOutCar } from "@/http/api.js";
let timer = null;
let tableRef = ref(null);
const scroll = () => {
  // 在执行新的计时器前将之前的计时器清除
  if (timer) clearInterval(timer);
  let status = true;
  // 获取表格滚动区域的dom
  const scrollDom =
    tableRef.value.$refs.bodyWrapper.getElementsByClassName(
      "el-scrollbar__wrap"
    )[0];
  // 设置每秒滚动一行
  timer = setInterval(() => {
    if (status) {
      // 设置每次滚动的像素
      scrollDom.scrollTop += 1;
      // 当滚动到底部时修改scrollTop回到顶部
      if (
        scrollDom.scrollHeight -
          (scrollDom.clientHeight + scrollDom.scrollTop) <
        1
      ) {
        scrollDom.scrollTop = 0;
      }
    }
    //控制速度
  }, 20);
};
// const tableData = ref([])
const tableData = ref([]);
//设置定时器进行自滚动
const getData = () => {
  setTimeout(() => {
    scroll();
  }, 5);
};
const getWaitOutCar = () => {
  waitOutCar().then((res) => {
    if (res.code == 200) {
      tableData.value = res.data;
      if (tableData.value.length > 0) {
        tableData.value.map((item) => {
          item.phone =
            item.phone.slice(0, 3) + "****" + item.phone.slice(7, 11);
          item.name =
            item.name.slice(0, 1) + (item.name.length == 2 ? "*" : "**");
        });
      }
    }
  });
};
onMounted(() => {
  //getWaitOutCar();
  setInterval(() => {
    getWaitOutCar();
  }, 1000 * 60);

  getData();
});
onUnmounted(() => {
  // 组件卸载记得清除计时器
  if (timer) clearInterval(timer);
  timer = null;
});
</script>
<style lang="scss" scoped>
.topTable {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #000000;
  overflow: hidden;
}
.table {
  display: flex;
  margin-top: 10px;
}
.top_class {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  margin: 0 16px;
  line-height: auto;
  font-weight: bold;
  color: red;
  p {
    font-size: 60px;
    margin: 0 16px;
    line-height: auto;
    font-weight: bold;
  }
  .english_label {
    font-size: 60px;
    margin: 0 16px;
    line-height: auto;
    font-weight: bold;
  }
}
:deep(.el-table) {
  background: #000000;
}
:deep(.el-table thead.is-group th.el-table__cell) {
  background: #000000;
  border: none;
}
:deep(.cell) {
  color: red;
}
:deep(.el-table__cell) {
  background: #000000;
  .cell {
    font-size: 36px;
    margin: 0 10px;
    line-height: 58px;
    font-weight: bold;
  }
}
:deep(.el-table_1_column_1) {
  .cell {
    font-size: 28px;
    margin: 0 16px;
    line-height: 40px;
    font-weight: bold;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: start !important;
    p {
      margin: 0 10px;
      font-size: 28px;
      font-weight: bold;
    }
    .english_label {
      margin: 0 10px;
      font-size: 32px;
      font-weight: bold;
    }
  }
}
:deep(.el-table_2_column_6) {
  .cell {
    font-size: 32px;
    margin: 0 16px;
    line-height: 30px;
    font-weight: bold;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: start !important;
    p {
      margin: 0 5px;
      font-size: 23px;
      font-weight: bold;
    }
    .english_label {
      margin: 0 5px;
      font-size: 15px;
      font-weight: bold;
    }
  }
}
:deep(.el-table__cell) {
  padding: 26px 0;
  .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    p {
      margin: 0 10px;
      font-size: 48px;
      font-weight: bold;
      line-height: auto;
    }
  }
}
.split_class {
  width: 4px;
  background: red;
}
:deep(.el-table) {
  --el-table-border-color: transparent;
  --el-table-border: none;
}
:deep(.el-table__body::-webkit-scrollbar) {
  display: none;
}
</style>
